<script setup name="informlist">
import { ref, onMounted } from 'vue'
import OADialog from '@/components/OADialog.vue';
import OAMain from '@/components/OAMain.vue';
import timeFormat from '@/utils/timeFormat'
import { useAuthStore } from '@/stores/auth';
import OAPagination from '@/components/OAPagination.vue';
import informHttp from '@/api/informHttp';
import { ElMessage } from 'element-plus';

const authStore = useAuthStore()
let pagination = ref({
    page:1,
    total:0
})
let dialogVisible = ref(false)
let handleIndex = ref(0)
let informs = ref([])
const onshowDialog = (index) => {
    handleIndex.value = index
    dialogVisible.value = true
}

const onDeleteInform = async() => {
    try{
        let inform = informs.value[handleIndex.value]
        await informHttp.deleteInform(inform.id)
        informs.value.splice(handleIndex.value,1)
        ElMessage.success('删除成功')
        dialogVisible.value = false
    }catch(err){
        console.error('完整错误对象:', err)
        ElMessage.error(err.response?.data?.message || err.message)
    }
}

onMounted(async()=>{
    try{
        let res = await informHttp.getInformList(1)
        informs.value = res.results
        pagination.value.total = res.count
    }catch(err){
        ElMessage.error(err.response?.data?.message || err.message)
    }
})

</script>
<template>
    
    <OAMain title="通知列表">
        <el-card class="list_card">
        <el-table :data="informs" style="width: 100%" class="laoqin_list">
            <el-table-column label="标题"  align="center"> 
                <template #default="scope">
                    <el-badge  v-if="scope.row.reads.length == 0" is-dot class="item">
                        <RouterLink :to="{name:'inform_detail', params:{pk:scope.row.id}}">{{ scope.row.title }}
                        </RouterLink>
                    </el-badge>
                    <RouterLink v-else :to="{name:'inform_detail', params:{pk:scope.row.id}}">{{ scope.row.title }}
                    </RouterLink>
                </template>
            </el-table-column>
            <el-table-column   label="发布者" align="center">
                <template #default="scope">
                    {{ '[' + scope.row.author.department.name + ']' + scope.row.author.realname }}
                </template>
            </el-table-column>
            <el-table-column  label="发布时间" align="center">
                <template #default="scope">
                    {{ timeFormat.stringFromDateTime(scope.row.create_time) }}
                </template>
            </el-table-column>
            <el-table-column label="部门可见" align="center">
                <template #default="scope">
                    <el-tag v-if="scope.row.public" type="success">公开</el-tag>
                    <el-tag v-else v-for="department in scope.row.departments" type="info" :key="department.id">{{ department.name }}</el-tag>
                </template>
            </el-table-column>
            <el-table-column label="操作" align="center">
                <template #default="scope">
                    <el-button v-if="scope.row.author.uid == authStore.user.uid" @click="onshowDialog(scope.$index)" type="danger" icon="Delete"></el-button>
                    <el-button v-else disabled type="default">无</el-button>
                </template>
            </el-table-column>
        </el-table>
    </el-card>
    </OAMain>
    <OAPagination :total="pagination.total" v-model="pagination.page"></OAPagination>
    <OADialog title="提示" @submit="onDeleteInform" v-model="dialogVisible" width="400px">
        <span>您确定要删除这篇通知吗？</span>
    </OADialog>
</template>

<style scoped>
.list_card{
    margin-top: 10px;
}
.el-tag{
    margin-right: 3px;
}
.el-badge{
    margin-right: 4px;
    margin-top: 4px;
}
</style>